<template>
	<!-- 我的 -->
	<view class="content">
		<scroll-view scroll-y class="scroll-box">
			<!-- 头部 -->
			<view class="head">
				<image class="bgImg" src="../../static/image/user-center-bgimg.png"></image>
			</view>
			<!-- 菜单 -->
			<view class="cbox">
				<view class="row-cont">
					<navigator hover-class="none" class="row-cont-item" :url="'./group-notice?groupid=' + groupid">
						<i class="iconfont icongonggao qiandao"></i>
						<view class="row-cont-item-til">公告</view>
					</navigator>
					<navigator hover-class="none" class="row-cont-item" :url="'./group_class?student_id=' + student_id + '&is_exam_type=1'">
						<i class="iconfont iconbanjiguanli-xuanzhong-copy-copy xuexi"></i>
						<view class="row-cont-item-til">班级</view>
					</navigator>
					<navigator hover-class="none" class="row-cont-item" :url="'./tclist?groupid=' + groupid">
						<i class="iconfont iconwenti1 hudong"></i>
						<view class="row-cont-item-til">互动</view>
					</navigator>
					<!-- <navigator class="row-cont-item" hover-class="none" url="../quesAndAnswer/interact"> -->
					<view class="row-cont-item" @tap="none">
						<i class="iconfont iconrenwu_mian renwu"></i>
						<view class="row-cont-item-til">家长会</view>
					</view>
					<!-- </navigator> -->
				</view>
			</view>

			<!-- 公告列表 -->
			<scroll-view class="notice-content" scroll-y>
				<!-- <block v-for="(item, index) in mockList" :key="index">
					<view @click="gotodetail(index)" class="container">
						<view class="flex-row">
							<view class="flex-row1">
								<view class="blue-line"></view>
								<view class="aaaa" :class="{grid_r1_l1_top:item.is_top}">{{item.notice_title}}</view>
							</view>
							<view class="read">已有{{item.browse_num}}人阅读</view>
						</view>
						<view class="flex-row flex-row2">
							<view class="read">发布人: {{item.user_name}}</view>
							<view class="read">发布时间: {{item.crate_time}}</view>
						</view>
						<view class="flex-row3">{{item.notice_text}}</view>
					</view>
				</block> -->
				<view class="not_data"  v-if="notices_list.length==0">
					<i class="iconfont iconzanwukecheng"></i>
					<view class="not_data_text">当前暂无班级公告</view>
				</view>
				<block v-for="(item, idx) in notices_list" :key="idx">
					<view class="container" @tap="gotodetail(idx)">
						<view class="flex-row">
							<view class="flex-row1">
								<view class="blue-line"></view>
								<view class="notice-title" :class="{ grid_r1_l1_top: item.is_top }">{{ item.notice_title }}</view>
							</view>
							<view class="read">已读</view>
						</view>
						<view class="flex-row flex-row2">
							<view class="flex-aux-tip">发布人: {{ item.nicheng ? item.nicheng : '未设置昵称' }} </view>
							<view class="read">发布时间: {{ item.crate_time }}</view>
						</view>
						<!-- <view class="flex-row3">乏味金佛我溶解污垢吉特我</view> -->
					</view>
				</block>
				<uni-load-more v-if="notices_list.length > 6"  :status="status" :content-text="contentText" />
			</scroll-view>
		</scroll-view>
	</view>
</template>

<script>
import cDate from '@/common/util.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		self = this;
		return {
			imgUrl: this.defimg, // 用户头像路径
			user_level: '../../static/image/user-center-level.png', // 家长等级
			user_name: '', // 家长姓名
			student_id: '',
			notices_list: [],
			groupid: '',
			page: 1,
			reload: true,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多',
				contentnot: "没数据"
			}
		};
	},
	onPullDownRefresh() {
		this.getInfo();
		this.reload = true;
		this.page = 1;
		this.getClass();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = this.page + 1;
		var _this = this;
		setTimeout(function() {
			_this.getNotices();
		}, 500);
	},
	onLoad: function() {
		if(uni.getStorageSync('groupid')){
			this.groupid = uni.getStorageSync('groupid')
		}
		this.getInfo();
		this.$forceUpdate();
		this.getClass()
	},
	methods: {
		/* 获取用户信息 */
		getInfo() {
			var currentChild = uni.getStorageSync('currentChild');
			this.student_id = currentChild.student_id;
			// 初始化获取用户数据信息
			this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
				if (res.data.code == 200) {
					var data = res.data.data;
					this.user_name = data.nicheng;
					if (this.user_name == '') {
						this.user_name = '未设置昵称';
					}
					// 设置头像
					// this.imgUrl = data.avatar == '' ? this.imgUrl : data.avatar;
				}
			});
		},
		/* 获取班级列表 */
		getClass() {
			this.$zapi.apiPost('user/Grade.User/GradeList', {
				'student_id': this.student_id
			}).then(res => {
				var class_list;
				if (res.data.code == 200) {
					if (res.data.data.length == 0) {
						uni.showToast({
							title: '未加入班级',
							icon:'none'
						});
					} else {
						class_list = res.data.data; //我加入群列表的信息
						if(this.groupid==""){
							this.groupid = class_list[0].groupid;
						}
						this.getNotices()
					}
				}
			});
		},
		// 获取班级通知
		getNotices() {
			this.$zapi.apiPost('user/notice/listsNotice', {
				"groupid": this.groupid,
				page: this.page,
				pagesize: 8
			}).then(res => {
				if(res.data.code == 200){
					var data = res.data.data.data;
					for (let i = 0; i < data.length; i++) {
						data[i].crate_time = cDate.getFormatTime(data[i].crate_time);
					}
					this.notices_list = this.reload ? data : this.notices_list.concat(data);
					this.reload = false;
					this.status = 'more';
				}else{
					if(this.reload){
						this.notices_list = [];
					}else{
						this.status = 'noMore';
					}
				}
			});
		},
		// 跳转通知详情
		gotodetail: function(index) {
			uni.navigateTo({
				url: 'group-notice-detail?data=' + encodeURIComponent(JSON.stringify(this.notices_list[index]))
			})
		},
		// 跳转作业记录
		linkWorkLog() {
			uni.navigateTo({
				url: `../child/change_groups?student_id=${this.student_id}&is_exam_type=${1}`,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		// 跳转通知
		linkInform() {
			uni.navigateTo({
				url: './inform/inform-list'
			});
		},
		// 跳转个人信息
		pageChangeUserCenterNew() {
			uni.navigateTo({
				url: './personal'
			});
		},
		/* 同步 */
		tongbu() {
			uni.navigateTo({
				url: '../child/drill-impression?student_id=' + this.student_id
			});
		} /* 趣练 */,
		qulian() {
			uni.navigateTo({
				url: '../qulian/practice-records?student_id=' + this.student_id
			});
		},
		/* 暂未开通 */
		none() {
			uni.showToast({
				title: '该功能暂未开通',
				icon: 'none'
			});
		},
		/* 等级中心 */
		level() {
			uni.navigateTo({
				url: 'level-center'
			});
		},
		// 打开二维码
		QRcode() {
			uni.navigateTo({
				url: './QR-code'
			});
		},
		// 我的笔记
		linkMyNote() {
			uni.navigateTo({
				url: `/pages/personal-note/index`
			});
		},
		/* 进入主页 */
		index() {
			uni.navigateTo({
				url: '../parenting/index'
			});
		}
	}
}
</script>

<style>
page {
	background: #FAFAFA;
}

.not_data {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.not_data i {
	margin-top: 20upx;
	font-size: 400upx;
	line-height: 300upx;
	color: rgba(229, 229, 229, 1);
}

.not_data_text {
	color: #c2c2c2;
	font-size: 38upx;
	line-height: 60upx;
	
}

.name {
	display: flex;
	font-size: 38upx;
	color: #ffffff;
	font-weight: bold;
}
.name .level-wrap {
	display: flex;
	margin-left: 10upx;
	align-items: center;
}
.level-wrap image {
	width: 44upx;
	height: 36upx;
}
/* .name .level{width:36upx; height:36upx; margin-left:16upx; background:#FFCE00; color:#fff; font-size:20upx; border-radius:50%; text-align: center; line-height: 36upx;} */
.name .bg-grade {
	height: 30upx;
	line-height: 28upx;
	text-align: center;
	color: #fff;
	font-size: 24upx;
}
.name .grade {
	background: rgba(255, 255, 0, 1);
	height: 28upx;
	line-height: 28upx;
	color: rgba(255, 153, 0, 1);
	padding: 0 16upx 0 8upx;
	margin-left: -6upx;
	line-height: 30upx;
}

.school {
	font-size: 30upx;
	color: #ffffff;
	opacity: 0.8;
}

.content {
	position: relative;
	width: 100%;
}
.head {
	background-size: 100% 100%;
	width: 750upx;
	height: 324upx;
}
.bgImg {
	width: 100%;
	height: 324upx;
	background-size: 100% 100%;
}
.head-cont {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 42upx;
	margin: auto 30upx;
	width: 100%;
}
.head-cont-item1 {
	border-radius: 120upx;
	width: 120upx;
	height: 120upx;
}
.head-cont-item1 image {
	max-width: 120upx;
	max-height: 120upx;
	border-radius: 50%;
}
.head-cont-item2 {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-left: 30upx;
}
.head-cont-item3 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 120upx;
	position: relative;
	right: 60upx;
	color: #ffffff;
}
.qiandao {
	background-image: -webkit-linear-gradient(270deg, #60CCFF, #0098FB);
}
.xuexi {
	background-image: -webkit-linear-gradient(270deg, #ffc46b, #ff9900);
}
.renwu {
	background-image: -webkit-linear-gradient(270deg, #29e2b6, #00d5a2);
}
.hudong {
	background-image: -webkit-linear-gradient(270deg, #ff6d84, #ff83bd);
}
.tongzhi {
	background-image: -webkit-linear-gradient(270deg, #67ceff, #00acfe);
}
.cbox {
	position: relative;
	top: -130upx;
	margin-left: auto;
	margin-right: auto;
	width: 690upx;
	background-color: #ffffff;
	color: #333333;
	overflow: hidden;
	box-shadow:0px 4upx 12upx rgba(0,0,0,0.16);
	border-radius: 40upx;
}
.row-cont {
	height: 200upx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.row-cont .iconfont {
	font-size: 66upx;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	line-height: 80upx;
}
.row-cont-item {
	height: 178upx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.icon-style2 {
	font-size: 56upx;
	color: #ffffff;
}
.row-cont-item-til {
	text-align: center;
	color: #333333;
	font-size: 30upx;
}
.cbox-bottom {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 80upx;
	border-top: 1px solid #e5e5e5;
}
.cbox-bottom-item {
	font-size: 34upx;
	color: #ff9900; /*  */
}
.funct {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f3f3f3;
	height: 99upx;
	line-height: 99upx;
	padding-left: 40upx;
	padding-right: 40upx;
}
.cbox .funct:last-child {
	border-bottom: none;
}
.tap {
	display: flex;
	align-items: center;
}
.icon-sz {
	width: 42upx;
	height: 36upx;
}
.icon-styl1 {
	font-size: 50upx;
	margin-right: 23upx;
}
.indicator {
	color: #333333;
	font-size: 34upx;
}
.qwert {
	color: #999999;
	line-height: 98upx;
	font-size: 36upx;
	position: absolute;
	right: 40upx;
}

/* 公告内容 */
.notice-title {
	width: 560upx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 34upx;
	font-family:Source Han Sans CN;
	font-weight:400;
	line-height: 70upx;
	color: #333;
}
.notice-content {
	/* position: absolute; */
	height: 100%;
	width: 100%;
	background-color: #FAFAFA;
	position: relative;
	top: -110upx;

}

.container {
	height: auto;
	background-color: #ffffff;
	margin-bottom: 20upx;
	padding: 30upx;
	padding-top: 0;
}

.blue-line {
	width: 4upx;
	height: 36upx;
	background: #ff9900;
	margin-right: 16upx;
}

.flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.flex-row1 {
	width: 564upx;
	/* height: 40upx; */
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10upx;
	font-size: 38upx;
	color: #333333;
}

.grid_r1_l1_top:after {
	content: '【置顶】';
	display: inline-block;
	font-size: 26upx;
	color: #f10000;
}

.read {
	font-size: 26upx;
	color: #999999;
	margin-left: auto;
}
.read2 {
	font-size: 22upx;
	color: #999999;
	margin-left: auto;
}
.flex-aux-tip {
	font-size: 26upx;
	color: #999999;
}

.flex-row2 {
	/* width: 710upx; */
	height: 62upx;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-left: 20upx;
	font-size: 22upx;
	color: #999999;
}

.flex-row3 {
	width: 90%;
	height: auto;
	/* display: flex;
		flex-direction: row;
		align-items: center; */
	margin-left: 20upx;
	font-size: 30upx;
	color: #666666;
	padding-top: 10upx;
	padding-bottom: 10upx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family:Source Han Sans CN;
	font-weight:400;
	line-height: 36px;
	border-top: 1px solid #e5e5e5;
}
</style>
